<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        table{
            border: 1px solid #aaa;
            width: 600px;
        }
       #app{
            width: 800px;
            margin:100px auto;
        }
        ul{
            width: 800px;
            list-style: none;
            display: inline-block;
            text-align: center;
            height: 70px;
            line-height: 70px;
        }
        img{
            width: 60px;
            height: 60px;
            padding-top: 10px;
        }
        ul li{
            width: 90px;
            height: 60px;
            list-style: none;
            line-height: 90px;
            display: inline-block;
        }
        thead > th{
            display: inline-block;
        }
        td{
            height: 60px;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
        <div id="app">
        <ul :style="{backgroundColor:'#cdcdcd'}">
            <li></li>
            <li v-for="item in student" >{{item}}</li>
        </ul>
        <ul v-for="(item,index) in list"  :style="{backgroundColor:index % 2 == 0? '#fff':'#cdcdcd'}">
            <li>
                <img v-if="index == 0" src="./img1.png">
                <img v-else-if="index == 1" src="./img2.png">
                <img v-else-if="index == 2" src="./img3.png">
            </li>
                <li>{{item.name}}</li>
                <li>{{item.math}}</li>
                <li>{{item.chinese}}</li>
                <li>{{item.English}}</li>
                <li>{{item.geography}}</li>
                <li>{{item.history}}</li>
            <li>{{item.score}}</li>      
        </ul>
        <!-- <ul>
            <li>{{score}}</li>
        </ul> -->
            <!-- <table>
                <thead>
                    <tr>
                        <th v-for="item in student">{{item}}</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item,index) in list" :style="{backgroundColor:index % 2 == 0 ? '#fff':'#cdcdcd'}">
                        <td>
                            <img v-if="index == 0" src="./img1.png">
                            <img v-if="index == 1" src="./img2.png">
                            <img v-if="index == 2" src="./img3.png">
                        </td>
                        <td>{{item.name}}</td>
                        <td>{{item.math}}</td>
                        <td>{{item.chinese}}</td>
                        <td>{{item.English}}</td>
                        <td>{{item.geography}}</td>
                        <td>{{item.history}}</td>
                        <td>{{item.score}}</td>
                    </tr>
                </tbody>
            </table> -->
    </div>
    <script>
        const app = new Vue({
            el:'#app',
            data:{
                student:['姓名','数学','语文','英语','地理','历史','总分'],
                list:[
                    {name:'肖枫',math:'99',chinese:'100',English:'100',geography:'99',history:'98',score:'496'},
                    {name:'安澜',math:'90',chinese:'98',English:'89',geography:'96',history:'100',score:'473'},
                    {name:'路小北',math:'88',chinese:'87',English:'77',geography:'77',history:'86',score:'496'},
                    {name:'肖枫',math:'39',chinese:'100',English:'76',geography:'90',history:'59',score:'496'},
                ],
            },
        })
    </script>
</body>
</html>